<template>
    <section>
        <!--品牌高级查询工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true" :model="filters">
                <el-form-item>
                    <el-input v-model="filters.keyword" placeholder="品牌名称" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="querydictionarytype">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleAdd">新增</el-button>
                </el-form-item>
            </el-form>
        </el-col>

        <!--列表-->
        <el-table :data="dictionarytype" highlight-current-row v-loading="listLoading" @selection-change="selsChange" @row-dblclick="bccelldblclick" style="width: 100%;">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column type="index" width="60">
            </el-table-column>
            <el-table-column prop="name" label="品牌名称" width="200" sortable>
            </el-table-column>
            <el-table-column prop="sn" label="品牌编号" width="200" sortable>
            </el-table-column>
            <el-table-column label="操作" width="200">
                <template scope="scope">
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--品牌工具条-->
        <el-col :span="24" class="toolbar">
            <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 15, 30]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    style="float:right;">
            </el-pagination>
        </el-col>

        <!--品牌保存界面-->
        <el-dialog :title="saveTitle" :visible.sync="saveFormVisible" :close-on-click-modal="false">
            <el-form :model="saveForm" label-width="80px" :rules="saveFormRules" ref="saveForm">
                <el-form-item label="品牌名称" prop="name">
                    <el-input v-model="saveForm.name" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="品牌编号" prop="sn">
                    <el-input v-model="saveForm.sn" auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="saveFormVisible = false">取消</el-button>
                <el-button type="primary" @click.native="editSubmit" :loading="saveLoading">提交</el-button>
            </div>
        </el-dialog>
        <!-- 抽屉 -->
        <el-drawer :title="lockerTitle" :visible.sync="table" direction="rtl" size="50%">
            <section>
                <!--产品高级查询工具条-->
                <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
                    <el-form :inline="true" :model="filters">
                        <el-form-item>
                            <el-input v-model="gridData.keyword" placeholder="产品名称" clearable></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" v-on:click="getdictionarydetail">查询</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="handleAdddetail">新增</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
                <!-- 列表展示 -->
                <el-table :data="gridData" v-loading="detailLoading" >
                    <el-table-column property="name" label="产品名称" width="200"></el-table-column>
                    <el-table-column property="types_id" label="所属品牌" width="150"></el-table-column>
                    <el-table-column label="操作" width="200">
                        <template scope="scope">
                            <el-button size="small" @click="detailHandleEdit(scope.$index, scope.row)">编辑</el-button>
                            <el-button type="danger" size="small" @click="detailhandleDel(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <!--产品工具条-->
                <el-col :span="24" class="toolbar">
                    <el-pagination
                            @size-change="detailHandleSizeChange"
                            @current-change="detailHandleCurrentChange"
                            :current-page="detailCurrentPage"
                            :page-sizes="[5, 10, 15, 30]"
                            :page-size="detailPageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="detailTotal"
                            style="float:right;">
                    </el-pagination>
                </el-col>
            </section>
        </el-drawer>
        <!--产品品牌保存界面-->
        <el-dialog :title="detailSaveTitle" :visible.sync="detailSaveFormVisible" :close-on-click-modal="false">
            <el-form :model="detailSaveForm" label-width="80px" :rules="detailSaveFormRules" ref="detailSaveForm">
                <el-form-item label="产品名称" prop="name">
                    <el-input v-model="detailSaveForm.name" auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="detailSaveFormVisible = false">取消</el-button>
                <el-button type="primary" @click.native="detailEditSubmit" :loading="saveLoading">提交</el-button>
            </div>
        </el-dialog>
    </section>
</template>

<script>

    export default {
        data() {
            return {
                //品牌高级查询
                filters: {
                    keyword: ''
                },
                dictionarytype: [],//显示列表集合

                total: 0,//总条数
                currentPage: 1,//当前页
                pageSize: 10,//当前条数

                //保存的标题 新增或者标题
                saveTitle:'',

                listLoading: false,//忙等
                sels: [],//列表选中列

                saveFormVisible: false,//编辑界面是否显示

                saveLoading: false,//提交忙等
                //提示
                saveFormRules: {
                    name: [
                        { required: true, message: '请输入品牌名称', trigger: 'blur' }
                    ],
                    sn: [
                        { required: true, message: '请输入品牌编号', trigger: 'blur' }
                    ]
                },
                //编辑界面数据
                saveForm: {
                    id: null,
                    sn:'',
                    name: '',
                },




                //是否打开抽屉
                table: false,

                //抽屉的标题
                lockerTitle:"",
                detailLoading:false,//产品忙等
                //抽屉
                gridData: [{
                    pid:null,
                    name:"",
                    types_id:null,
                    keyword: '',
                }],
                detailTotal:0,
                detailCurrentPage: 1,//当前页
                detailPageSize: 10,//当前条数
                detailSaveTitle: '',//保存框的头 新增或者编辑
                detailSaveForm: {
                    id:null,
                    types_id:null,
                    name: '',
                },
                detailSaveFormVisible: false,//编辑界面是否显示
                //提示
                detailSaveFormRules: {
                    name: [
                        { required: true, message: '请输入产品品牌名称', trigger: 'blur' }
                    ],
                },
            }
        },
        methods: {
            //品牌当前页条数
            handleCurrentChange(val) {
                this.currentPage = val;
                this.getdictionarytype();
            },
            //品牌跳转页
            handleSizeChange(val) {
                this.pageSize = val;
                this.getdictionarytype();
            },
            //产品当前页条数
            detailHandleSizeChange(val){
                this.detailPageSize = val;
                this.getdictionarydetail();
            },
            //产品跳转页
            detailHandleCurrentChange(val){
                this.detailCurrentPage = val;
                this.getdictionarydetail();
            },
            //高级查询
            querydictionarytype(){
                this.currentPage = 1;
                this.getdictionarytype();
            },
            //获取用户列表
            getdictionarytype() {
                let para = {
                    pageSize: this.pageSize,
                    currentPage: this.currentPage,
                    keyword: this.filters.keyword,
                };
                this.listLoading = true;//开启忙等
                this.$http.post("/syst/pagelist",para).then(res=>{
                    this.listLoading = false;//关闭忙等
                    this.dictionarytype = res.data.data;
                    this.total = res.data.total;
                })
            },
            //删除
            handleDel: function (index, row) {
                this.$confirm('确认删除该记录吗?', '提示', {
                    type: 'warning'
                }).then(() => { //点击确定后进入
                    //删除
                    this.listLoading = true;
                    this.$http.delete("/syst/"+row.id).then(res=>{
                        this.listLoading = false;
                        if(res.data.success){
                            this.$message({
                                message: res.data.msg,
                                type: 'success',
                            })
                            this.getdictionarytype();
                        }else {
                            this.$message({
                                message: res.data.msg,
                                type: 'warning',
                            })
                        }

                    })

                }).catch(() => {//点击取消后进入

                });
            },
            //显示编辑界面
            handleEdit: function (index, row) {
                this.saveTitle = "编辑"
                if(this.$refs['saveForm']){
                    this.$refs['saveForm'].resetFields();//重置表单验证
                }
                this.saveFormVisible = true;
                this.saveForm = Object.assign({}, row);
            },
            //新增保存界面
            handleAdd: function () {
                this.saveTitle = "新增"
                if(this.$refs['saveForm']){
                    this.$refs['saveForm'].resetFields();//重置表单验证
                }
                this.saveFormVisible = true;
                this.saveForm = {
                    sn: '',
                    name: '',
                };
            },
            //编辑
            editSubmit: function () {
                this.$refs.saveForm.validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            this.saveLoading = true;
                            let para = Object.assign({}, this.saveForm);
                            this.$http.put("/syst",para).then(res=>{
                                this.saveLoading = false;
                                if (res.data.success){
                                    this.$message({
                                        message: res.data.msg,
                                        type: 'success',
                                    });
                                    //重置表单验证
                                    this.$refs['saveForm'].resetFields();
                                    this.saveFormVisible = false;
                                    this.getdictionarytype();
                                }else {
                                    this.$message({
                                        message: res.data.msg,
                                        type: 'warning',
                                    });
                                }

                            })
                            
                        });
                    }
                });
            },
            selsChange: function (sels){
                this.sels = sels;
            },







            //打开抽屉
            bccelldblclick:function(row){
                this.gridData.pid = row.id;
                this.lockerTitle = row.name;
                this.table = true;
                this.$http.get("/syst/"+row.id).then(res=>{
                    this.gridData = res.data.data;
                    this.detailTotal = res.data.total;
                    this.gridData.pid = res.data.pid;
                    console.log(res)
                })
            },
            //高级查询产品
            getdictionarydetail(){
                let para = {
                    pageSize: this.detailPageSize,
                    currentPage: this.detailCurrentPage,
                    keyword: this.gridData.keyword,
                    pid:this.gridData.pid,
                };
                this.detailLoading = true;//开启忙等
                this.$http.post("/detail/pagelist",para).then(res=>{
                    this.detailLoading = false;//关闭忙等
                    this.gridData = res.data.data;
                    this.detailTotal = res.data.total;
                    this.gridData.pid = res.data.pid;
                })
            },
            //删除数据
            detailhandleDel(index, row){
                this.$confirm('确认删除该记录吗?', '提示', {
                    type: 'warning'
                }).then(() => { //点击确定后进入
                    //删除
                    this.detailLoading = true;
                    this.$http.delete("/detail/"+row.id).then(res=>{
                        this.detailLoading = false;
                        if(res.data.success){
                            this.$message({
                                message: res.data.msg,
                                type: 'success',
                            })
                            this.getdictionarydetail();
                        }else {
                            this.$message({
                                message: res.data.msg,
                                type: 'warning',
                            })
                        }

                    })

                }).catch(() => {//点击取消后进入

                });
            },
            //点击新增
            handleAdddetail(){
                this.detailSaveTitle = "新增"
                if(this.$refs['detailSaveForm']){
                    this.$refs['detailSaveForm'].resetFields();//重置表单验证
                }
                this.detailSaveFormVisible = true;
            },
            //编辑弹出框
            detailHandleEdit(index, row){
                this.detailSaveTitle = "编辑"
                if(this.$refs['detailSaveForm']){
                    this.$refs['detailSaveForm'].resetFields();//重置表单验证
                }
                this.detailSaveFormVisible = true;
                this.detailSaveForm = Object.assign({}, row);
                this.detailSaveForm.types_id = this.gridData.pid;
            },
            //编辑
            detailEditSubmit: function () {
                //detailSaveFormRules表的表单验证
                this.$refs.detailSaveForm.validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            this.saveLoading = true;
                            //给所属品牌赋值
                            this.detailSaveForm.types_id = this.gridData.pid;
                            //赋值
                            let para = Object.assign({}, this.detailSaveForm);
                            this.$http.put("/detail",para).then(res=>{

                                this.saveLoading = false;
                                if (res.data.success){
                                    this.$message({
                                        message: res.data.msg,
                                        type: 'success',
                                    });
                                    //重置表单验证
                                    console.log(this.gridData)
                                    this.$refs['detailSaveForm'].resetFields();
                                    this.detailSaveFormVisible = false;
                                    this.getdictionarydetail();
                                }else {
                                    this.$message({
                                        message: res.data.msg,
                                        type: 'warning',
                                    });
                                }

                            })

                        });
                    }
                });
            },

        },
        mounted() {
            this.getdictionarytype();
        }
    }

</script>

<style scoped>

</style>
